<script lang="ts" setup>
import { CirclePlus, Plus, Search } from '@element-plus/icons-vue'

const props = defineProps({
    data: {
        type: Array,
        default: () => [],
    },
    fields: {
        type: Array as PropType<MyField[]>,
        default: () => [],
    },
    rowKey: {
        type: String,
        default: undefined,
    },
})
const queryForm = ref<{ [key: string]: any }>({})
const shortcuts = [
    {
        text: '最近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 7)
            return [start, end]
        },
    },
    {
        text: '最近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 1)
            return [start, end]
        },
    },
    {
        text: '最近三个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 3)
            return [start, end]
        },
    },
]
const formDialogVisible = ref(false)
const form = ref<{ [key: string]: any }>({})


function onQuerySubmit() {
    console.log('查询', queryForm.value)
}
function onFormSumbit() {
    console.log('保存', form.value)
    formDialogVisible.value = false
}
function onAddClick() {
    form.value = {}
    formDialogVisible.value = true
}
function onEditClick(row: any) {
    form.value = { ...row }
    formDialogVisible.value = true
}
function onDeleteClick(row: any, idx: number) {
    console.log('删除', row, idx)
    ElMessageBox.confirm(
        '确定要删除吗?',
        '删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
</script>

<template>
    <div h-full overflow-y-hidden>
        <div style="background-color: var(--ep-fill-color-blank); border: 1px solid var(--ep-border-color);border-radius: .1rem;"
            mb1 px2>
            <el-form :inline="true" :model="queryForm" class="pl2 pt2 text-left">
                <el-form-item v-for="(field, idx) in fields.filter(f => f.search)" :key="idx" :label="field.label">
                    <el-input v-if="!field.formType || field.formType === 'input'" v-model="queryForm[field.prop]"
                        :placeholder="`请输入${field.label}`" clearable />
                    <el-date-picker v-else-if="field.formType === 'datetime'" v-model="queryForm[`${field.prop}Range`]"
                        type="datetimerange" :shortcuts="shortcuts" range-separator="-" start-placeholder="开始时间"
                        end-placeholder="结束时间" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" w-4 :icon="Search" @click="onQuerySubmit">
                        查询
                    </el-button>
                    <el-button type="primary" w-4 :icon="CirclePlus" @click="onAddClick">
                        新增
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div
            style="background-color: var(--ep-fill-color-blank);padding: .5rem;padding-bottom: .8rem;border: 1px solid var(--ep-border-color);border-radius: .1rem;">
            <el-table :row-key="rowKey" :data="data" style="height: calc(100vh - 270px);">
                <el-table-column v-for="(field, idx) in fields.filter(f => f.show !== false)" :key="idx"
                    :prop="field.prop" :label="field.label" />
                <el-table-column width="180">
                    <template #default="{ row, $index }">
                        <el-button size="small" type="primary" @click="onEditClick(row)">
                            编辑
                        </el-button>
                        <el-button size="small" type="danger" @click="onDeleteClick(row, $index)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div flex justify-end pt="4">
                <el-pagination background size="small" layout="total, sizes, prev, pager, next, jumper" :total="50" />
            </div>
        </div>
    </div>

    <el-dialog v-model="formDialogVisible" title="保存" width="500">
        <el-form :model="form" label-width="80px">
            <el-form-item v-for="(field, idx) in fields.filter(f => f.save)" :key="idx" :label="field.label">
                <el-input v-if="!field.formType || field.formType === 'input'" v-model="form[field.prop]" />
                <el-date-picker v-else-if="field.formType === 'datetime'" v-model="form[field.prop]" type="datetime" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div>
                <el-button @click="formDialogVisible = false">
                    取消
                </el-button>
                <el-button type="primary" @click="onFormSumbit()">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
